<style lang="stylus" scoped>
  .header-link
    width 100%
    display flex
    .link-item
      box-sizing border-box
      flex 1
      display flex
      align-items center
      justify-content center
      height 88rpx
      font-size 28rpx
      color #fff
      .link
        display inline
        padding-bottom 4px
        border-bottom 2px solid transparent
        &.active
          border-bottom 2px solid #fff
</style>

<template>
  <div class="header-link">
    <block v-for="(item, index) in links" :key="index">
      <div class="link-item" @click="toLink(item.url)">
        <div 
          :class="['link', item.index === active ? 'active' : '']" 
          :url="item.url" 
          hover-class="none">{{item.name}}</div>
      </div>
    </block>
  </div>
</template>

<script>
export default {
  onLoad() {
    let route = this.$root.$mp.page.route;
    this.route = route;
    this._isRouter(route);
    console.log(this.$root.$mp.page)
  },
  onShow() {
    let route = this.$root.$mp.page.route;
    this.route = route;
    this._isRouter(route);
    console.log(this.$root.$mp.page)
  },
  data() {
    return {
      links: [{
        name: '推荐',
        index: 1,
        url: '/pages/index/main',
      }, {
        name: '歌手',
        index: 2,
        url: '/pages/logs/main'
      }, {
        name: '排行',
        index: 3,
        url: '/pages/index/main'
      }, {
        name: '搜索',
        index: 4,
        url: '/pages/index/main'
      }],
      active: 0
    }
  },
  methods: {
    toLink(url) {
      wx.navigateTo({
        url
      })
    },
    _isRouter(route) {
      for (let index = 0; index < this.links.length; index++) {
        let _item = this.links[index]
        if (`/${route}` === _item.url) {
          this.active = _item.index
          return 
        }
      }
    }
  }
}
</script>

